@mixin mode-light {
  --hbs-background: #{$gray-200};
  --hbs-on-background: var(--bs-dark);
  --hbs-surface: #{$white};
  --hbs-on-surface: var(--bs-dark);
  --hbs-primary-text: #{$dark-primary};
  --hbs-secondary-text: #{$dark-secondary};
  --hbs-disabled-text: #{$dark-disabled};
  --hbs-accent: var(--hbs-primary);
  --hbs-shadow: rgba(0, 0, 0, .075);
  --hbs-navbar-bg: var(--hbs-primary);
}

@mixin mode-dark {
  --hbs-background: #121212;
  --hbs-on-background: #{$white};
  --hbs-surface: #1e1e1e;
  --hbs-on-surface: #{$white};
  --hbs-primary-text: #{$white};
  --hbs-secondary-text: #{$white-secondary};
  --hbs-disabled-text: #{$white-disabled};
  --hbs-accent: var(--hbs-primary-light);
  --hbs-shadow: rgba(0, 0, 0, .75);
  --hbs-navbar-bg: var(--hbs-surface);
}

.mode-light {
  @include mode-light;
}

.mode-dark {
  @include mode-dark;
}

$mode-switcher-bg-image: url("data:image/svg+xml,<svg t='1605458515775' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2466' width='200' height='200'><path d='M549.668786 25.303185l51.030356 124.781978c8.425728 20.601336 33.340926 28.697075 52.266315 16.983453l114.628306-70.955713c30.979002-19.175382 69.613757 8.893713 60.948036 44.282573l-32.058967 130.94578c-5.293829 21.619303 10.105674 42.81462 32.302959 44.460567l134.443667 9.973678c36.332829 2.695913 51.090354 48.11245 23.28125 71.649691L883.608024 484.516386c-16.989452 14.379537-16.989452 40.576692 0 54.956229l102.904684 87.093193c27.811104 23.537241 13.053579 68.953778-23.28125 71.649691l-134.443667 9.973678c-22.197285 1.645947-37.596788 22.841264-32.302959 44.460568l32.058967 130.94578c8.663721 35.38886-29.971034 63.457955-60.948036 44.282573l-114.628306-70.955714c-18.92539-11.715622-43.842587-3.619883-52.266316 16.983453l-51.030355 124.781979c-13.791556 33.722913-61.546017 33.722913-75.337572 0l-51.030356-124.781979c-8.425728-20.601336-33.340926-28.697075-52.266315-16.983453l-114.630306 70.955714c-30.979002 19.175382-69.613757-8.893713-60.948036-44.282573l32.058967-130.94578c5.293829-21.619303-10.105674-42.81462-32.302959-44.460568l-134.443667-9.973678c-36.332829-2.695913-51.090354-48.11245-23.28125-71.649691L140.391976 539.474615c16.989452-14.379537 16.989452-40.576692 0-54.956229l-102.904684-87.093194c-27.811104-23.537241-13.053579-68.953778 23.28125-71.649691l134.443667-9.973678c22.197285-1.645947 37.596788-22.841264 32.302959-44.460567l-32.058967-130.94578c-8.663721-35.38886 29.971034-63.457955 60.948036-44.282573l114.630306 70.955713c18.92539 11.715622 43.840587 3.619883 52.266315-16.983453l51.030356-124.781978c13.791556-33.720913 61.546017-33.720913 75.337572 0zM783.991235 511.9955c0-149.977167-122.016068-271.991235-271.991235-271.991235-149.977167 0-271.991235 122.014068-271.991235 271.991235s122.014068 271.991235 271.991235 271.991235c149.975167 0 271.991235-122.014068 271.991235-271.991235z m-63.997938 0c0 114.688304-93.304993 207.993297-207.993297 207.993297s-207.993297-93.304993-207.993297-207.993297 93.304993-207.993297 207.993297-207.993297 207.993297 93.304993 207.993297 207.993297z' fill='#ffc107' p-id='2467'></path></svg>");
$mode-switcher-focus-bg-image: url("data:image/svg+xml,<svg t='1605458515775' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2466' width='200' height='200'><path d='M549.668786 25.303185l51.030356 124.781978c8.425728 20.601336 33.340926 28.697075 52.266315 16.983453l114.628306-70.955713c30.979002-19.175382 69.613757 8.893713 60.948036 44.282573l-32.058967 130.94578c-5.293829 21.619303 10.105674 42.81462 32.302959 44.460567l134.443667 9.973678c36.332829 2.695913 51.090354 48.11245 23.28125 71.649691L883.608024 484.516386c-16.989452 14.379537-16.989452 40.576692 0 54.956229l102.904684 87.093193c27.811104 23.537241 13.053579 68.953778-23.28125 71.649691l-134.443667 9.973678c-22.197285 1.645947-37.596788 22.841264-32.302959 44.460568l32.058967 130.94578c8.663721 35.38886-29.971034 63.457955-60.948036 44.282573l-114.628306-70.955714c-18.92539-11.715622-43.842587-3.619883-52.266316 16.983453l-51.030355 124.781979c-13.791556 33.722913-61.546017 33.722913-75.337572 0l-51.030356-124.781979c-8.425728-20.601336-33.340926-28.697075-52.266315-16.983453l-114.630306 70.955714c-30.979002 19.175382-69.613757-8.893713-60.948036-44.282573l32.058967-130.94578c5.293829-21.619303-10.105674-42.81462-32.302959-44.460568l-134.443667-9.973678c-36.332829-2.695913-51.090354-48.11245-23.28125-71.649691L140.391976 539.474615c16.989452-14.379537 16.989452-40.576692 0-54.956229l-102.904684-87.093194c-27.811104-23.537241-13.053579-68.953778 23.28125-71.649691l134.443667-9.973678c22.197285-1.645947 37.596788-22.841264 32.302959-44.460567l-32.058967-130.94578c-8.663721-35.38886 29.971034-63.457955 60.948036-44.282573l114.630306 70.955713c18.92539 11.715622 43.840587 3.619883 52.266315-16.983453l51.030356-124.781978c13.791556-33.720913 61.546017-33.720913 75.337572 0zM783.991235 511.9955c0-149.977167-122.016068-271.991235-271.991235-271.991235-149.977167 0-271.991235 122.014068-271.991235 271.991235s122.014068 271.991235 271.991235 271.991235c149.975167 0 271.991235-122.014068 271.991235-271.991235z m-63.997938 0c0 114.688304-93.304993 207.993297-207.993297 207.993297s-207.993297-93.304993-207.993297-207.993297 93.304993-207.993297 207.993297-207.993297 207.993297 93.304993 207.993297 207.993297z' fill='#e98f36' p-id='2467'></path></svg>");
$mode-switcher-checked-bg-image: url("data:image/svg+xml,<svg t='1605608465856' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2527' width='200' height='200'><path d='M1002.656 383.75h-21.312v-42.188c0-11.812-9.562-21.344-21.344-21.344s-21.344 9.532-21.344 21.344v42.188h-21.312c-11.782 0-21.344 9.562-21.344 21.376 0 11.75 9.562 21.312 21.344 21.312h21.312v42.688c0 11.75 9.562 21.312 21.344 21.312s21.344-9.562 21.344-21.312v-42.688h21.312c11.782 0 21.344-9.562 21.344-21.312 0-11.814-9.562-21.376-21.344-21.376zM704 554.218h-21.344V512c0-11.782-9.532-21.344-21.312-21.344S640 500.218 640 512v42.218h-21.344c-11.782 0-21.312 9.532-21.312 21.344 0 11.75 9.532 21.312 21.312 21.312H640v42.688c0 11.75 9.562 21.312 21.344 21.312s21.312-9.562 21.312-21.312v-42.688H704c11.782 0 21.344-9.562 21.344-21.312 0-11.812-9.562-21.344-21.344-21.344z' fill='#ffffff' p-id='2528'></path><path d='M336.156 687.844c-129.468-129.468-158.312-321.468-86.562-478.782-45.156 20.562-87.468 49.438-124.624 86.562-166.624 166.624-166.624 436.782 0 603.406s436.782 166.624 603.406 0c37.156-37.156 66-79.468 86.562-124.594-157.344 71.72-349.314 42.876-478.782-86.592z' fill='#ffffff' p-id='2529'></path><path d='M1004.406 152.062c-2.906-0.218-72.468-5.75-161.562 4.688-52.562 6.188-101 16.688-144 31.188-54.594 18.468-100.594 43.532-136.718 74.562l27.782 32.376c72.844-62.5 180-86.5 257.094-95.624 84.75-10.032 152.812-4.75 153.938-4.688 0.562 0.062 1.156 0.094 1.718 0.094 11.782 0 21.344-9.532 21.344-21.344-0.002-11.19-8.626-20.346-19.596-21.252z' fill='#ffffff' p-id='2530'></path><path d='M428.812 533.75c0 11.812-9.562 21.376-21.344 21.376s-21.312-9.562-21.312-21.376c0-11.75 9.532-21.312 21.312-21.312s21.344 9.562 21.344 21.312z' fill='#ffffff' p-id='2531'></path><path d='M810.656 21.312c0 11.812-9.532 21.344-21.312 21.344S768 33.124 768 21.312C768 9.562 777.562 0 789.344 0s21.312 9.562 21.312 21.312z' fill='#ffffff' p-id='2532'></path><path d='M1024 618.876c0 11.782-9.562 21.344-21.344 21.344s-21.312-9.562-21.312-21.344 9.532-21.312 21.312-21.312S1024 607.094 1024 618.876z' fill='#ffffff' p-id='2533'></path><path d='M640 278.688c0 35.312-28.656 64-64 64s-64-28.688-64-64c0-35.376 28.656-64 64-64s64 28.624 64 64z' fill='#ffffff' p-id='2534'></path><path d='M398.656 128h-21.312V85.75c0-11.75-9.562-21.312-21.344-21.312S334.656 74 334.656 85.75V128h-21.312C301.562 128 292 137.562 292 149.312c0 11.812 9.562 21.344 21.344 21.344h21.312v42.656c0 11.812 9.562 21.344 21.344 21.344s21.344-9.532 21.344-21.344V170.656h21.312c11.782 0 21.344-9.532 21.344-21.344C420 137.562 410.438 128 398.656 128z' fill='#ffffff' p-id='2535'></path></svg>");

#modeSwitcher {
  background-image: $mode-switcher-bg-image;
  height: 1.2rem;
  width: 2.5rem;   
  margin-bottom: .25rem;
}

#modeSwitcher:focus {
  background-image: $mode-switcher-focus-bg-image;
}

#modeSwitcher:checked {
  background-image: $mode-switcher-checked-bg-image;
}
